<template>
    <el-card class="detail-time-period-item-card" shadow="never">
        <template #header>
            <div class="card-header">
                <span class="statistics-title card-title">{{ title }}</span>
            </div>
        </template>
        <div v-if="skeletonFlag" class="card-content">
            <div v-if="isEchartsShow" :id="idName" class="echarts"></div>
            <div v-else class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title font-style">暂无数据</div>
            </div>
        </div>
        <el-skeleton v-else :rows="3" animated />
    </el-card>
</template>

<script setup lang="ts">
import { computed, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

const props = withDefaults(
    defineProps<{
        idName: string;
        title: string;
        skeletonFlag: boolean;
        echartsData: any;
    }>(),
    {
        idName: '',
        title: '点赞时间段',
        skeletonFlag: false,
        echartsData: () => ({})
    }
);

const isEchartsShow = computed(() => props.echartsData?.ratio?.length);

/**
 * @description: 渲染echarts
 * @return {*}
 */
const renderChart = async () => {
    const earchList: any[] = [];
    for (const key in props.echartsData.time_type) {
        earchList.push({ value: '', name: props.echartsData.time_type[key] });
    }
    props.echartsData.ratio.forEach((item: any) => {
        earchList[item.time_type - 1].value = item.data;
    });
    await nextTick();
    const eChartsInstance = echarts.init(document.getElementById(props.idName));
    const option = {
        series: [
            {
                type: 'pie',
                data: earchList,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = earchList.length; i < l; i++) {
                                    total += Number(earchList[i].value);
                                    if (earchList[i].name == val.name) {
                                        tarValue = earchList[i].value;
                                    }
                                }
                                const p = ((tarValue / total) * 100).toFixed(2);
                                return val.name + ' ' + ' ' + p + '%';
                            }
                        },
                        labelLine: { show: true }
                    }
                },

                color: ['#ff0000', '#ff8364', '#ffb988', '#fde860', '#ffbe49', '#b50000'],
                radius: '50%'
            }
        ]
    };
    eChartsInstance.setOption(option);
    nextTick(() => {
        eChartsInstance.resize();
    });
    window.onresize = function () {
        eChartsInstance.resize();
    };
};

watch(
    () => props.echartsData,
    val => {
        if (props.echartsData?.ratio?.length) {
            renderChart();
        }
    },
    { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.detail-time-period-item-card {
    .font-style {
        white-space: nowrap;
        font-size: 14px;
        color: #444;
    }

    .card-title {
        white-space: nowrap;
        font-size: 16px;
        color: #444;
        font-weight: 500;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 6px;

        .statistics-title {
        }

        :deep(.tip-text) {
            width: 100px;

            .tip-text-item {
            }
        }

        .el-image {
            width: 20px;
            height: 20px;
        }
    }

    .card-content {
        .echarts {
            height: 360px;
        }

        .no_data {
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 60px;

            .emty_title {
                font-size: 12px;
                color: #888;
            }
        }
    }
}
</style>
